<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪类选择器</title>
		<style>
			/*伪类选择器：  语法：选择器 hover 悬停功能改变效果【所有元素都可以用】
			*/
		h1:hover{
			color: #aa0000;
			
		}
		/*练习：页面生成200px*200px四方块，默认红色，鼠标悬停后，调整黄色*/
		div{
			width: 200px;
			height: 200px;
			background: red;
		}
		div:hover{
			color: #ffff00;
		}
		/*超链接四种状态*/
		/*1.超链接未点击时  伪类选择器：link*/
		a:link{
			color:red;
			/*下划线*/
			text-decoration: none;
		}
		/*2.超链接点击后  伪类选择器：visited*/
		a:visited{
			color: blue;
		}
		/*3.悬停超链接状态  伪类选择器：hover*/
		a:hover{
			color: #ffff00;
			}
		/*4.点击跳转时状态 伪类选择器：active*/
		a:active{
			font-size: 50px;
		}
		/*:focus 伪类选择器针对input元素，鼠标点击输入框时候状态*/
		input:focus{
			background: #aa0000;
		}
		li:first-child{
			color: aliceblue;
		}
		li:last-child{
			color: #ffff00;
		}
		li:nth-child(3){
			font-size: 20px;
			color: #fff000 ;
		}
		</style>
	</head>
	<body>
		<!--列表、表格：伪类选择器：first-child、:last-child、：nth-child(n)-->
	<ul>
		<li>还珠格格</li>
		<li>情深深雨蒙蒙</li>
		<li>一帘幽梦</li>
		<li>庭院深深</li>
		<li>在水一方</li>
	</ul>
		
		
		
		
		
		
		
		
		
		
		
		
		
		<!--表单：伪类选择器     ：focus-->
		<input type="test">
		
		<h1>悬停效果</h1>
		<div></div>
		<h1>针对超链接了解四种状态</h1>
		<a href="#">超链接</a>
	</body>
</html>